<template>
  <div class="match-list">
    <div
      :style="{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-start', marginLeft: '4%' }">
      <div v-for="(item, index) in matchList" :key="index" @mouseover="mouseOver(item.id)" @mouseleave="mouseLeave(-1)"
        @click="matchListClick(item)"
        :style="{ width: '26.6%', background: matchId == item.id ? 'rgba(97, 104, 254, 0.5)' : 'rgba(204, 204, 204, 0.5)', borderRadius: (15 / 96) + 'rem', marginLeft: '2%', marginRight: '2%', marginBottom: (8 / 96) + 'rem', cursor: 'pointer', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
        <div
          :style="{ width: '92%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: (19 / 96) + 'rem', marginBottom: (28 / 96) + 'rem' }">
          <span
            :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">{{
            item.matchTime }}</span>
          <span v-if="item.matchTypes == 1"
            :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">未开始</span>
          <span v-if="item.matchTypes == 2"
            :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#E60012', lineHeight: (24 / 96) + 'rem' }">进行中</span>
          <span v-if="item.matchTypes == 3"
            :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#0092DE', lineHeight: (24 / 96) + 'rem' }">已结束</span>
        </div>
        <div
          :style="{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (12 / 96) + 'rem' }">
          <div
            :style="{ width: (56 / 96) + 'rem', height: (56 / 96) + 'rem', background: '#25274D', borderRadius: '50%', marginLeft: (31 / 96) + 'rem', marginRight: (23 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <img style="width: 100%; height: 100%; border-radius: 50%;" :src="item.homeTeamImage" />
          </div>
          <div
            :style="{ width: '66.9%', height: (29 / 96) + 'rem', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
            <span
              :style="{ fontSize: (28 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#000000', lineHeight: (34 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }">{{
              item.homeTeamName }}</span>
          </div>
        </div>
        <div
          :style="{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (15 / 96) + 'rem' }">
          <div
            :style="{ width: (56 / 96) + 'rem', height: (56 / 96) + 'rem', background: '#25274D', borderRadius: '50%', marginLeft: (31 / 96) + 'rem', marginRight: (23 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <img style="width: 100%; height: 100%; border-radius: 50%;" :src="item.awayTeamImage" />
          </div>
          <div
            :style="{ width: '66.9%', height: (29 / 96) + 'rem', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
            <span
              :style="{ fontSize: (28 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#000000', lineHeight: (34 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }">{{
              item.awayTeamName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MatchList',
    props: {
      matchList: {
        type: Array,
        default () {
          return [];
        }
      }
    },
    data () {
      return {
        matchId: 0
      }
    },
    methods: {
      mouseOver (id) {
        this.matchId = id;
        // this.$emit("mouseOver", id);
      },
      mouseLeave (id) {
        this.matchId = id;
        // this.$emit("mouseLeave", id);
      },
      matchListClick (item) {
        this.matchId = item.id;
        this.$emit("matchListClick", item);
      }
    }
  }
</script>

<style>
  /* .match-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  } */
</style>